import { defineStore } from 'pinia'
import { ref } from 'vue'
import { blocks as blocksData } from '@/mocks/blocks'
import type { BlockInfo } from '@/types/block'

// 导出一个名为useAppEditorStore的函数，用于定义一个名为'app-editor'的store
const useAppEditorStore = defineStore('app-editor', () => {
  // 定义一个名为currentBlockId的ref，用于存储当前选中的block的id，初始值为null
  const currentBlockId = ref<string | null>(null)
  // 定义一个名为blocks的ref，用于存储所有的block数据，初始值为blocksData
  const blocks = ref(blocksData)

  // 定义一个名为selectBlock的函数，用于选中一个block
  function selectBlock(id: string) {
    // 将当前选中的block的id设置为传入的id

    currentBlockId.value = id
  }

  // 定义一个名为updateBlocks的函数，用于更新所有的block数据
  function updateBlocks(newBlocks: typeof blocksData) {
    // 将blocks的值设置为传入的newBlocks
    console.log(newBlocks, 'newBlocks')

    blocks.value = newBlocks
  }

  // 定义一个名为updateBlock的函数，用于更新一个block的数据
  function updateBlock(id: string, newBlock: BlockInfo) {
    console.log(id, 'id')

    // 将blocks的值设置为一个新的数组，数组中的每个block的数据根据id进行更新
    blocks.value = blocks.value.map((block) => {
      if (block.id === id) {
        return newBlock
      }
      return block
    })
  }

  // 返回一个对象，包含currentBlockId、blocks、selectBlock、updateBlocks、updateBlock这几个属性
  return { currentBlockId, blocks, selectBlock, updateBlocks, updateBlock }
})

export default useAppEditorStore
